<template>
	<view>
			<view class="empty" v-if="show==false">
				<image src="../../static/shop.png" mode="widthFix" style="width: 400rpx;"></image>
			<view class="empty-text">空空如也的商品</view>
			</view>

		<view v-if="show==true" > 
			
			<uni-swipe-action v-for="(item,index) in supplierOrderDetailsList" :key="index">
			    <uni-swipe-action-item :right-options="options"  @click="bindClick(item.id)" @change="swipeChange($event, index)">
					<view class="goods-detail" >
						<view class="detail-left" >
						
							        <view class="goods-left" >
							        
							        	  <image src="../../static/kele.png" style="width: 150rpx;height: 140rpx;"></image>
							        </view>
							        <view class="size">
							            <text style="font-size: 30rpx;">名字：{{item.goodsName}}</text>
							            <text class="goods-price" style="font-size: 30rpx;">￥{{item.goodsInprice}}/件</text>
										
							        </view>
							  
						</view>
					
						<view class="detail-right">
							<text class="subtract" @click="reduce(item)">-</text>
							<text class="num">{{item.goodsNum}}</text>
							<text @click="add(item)" class="add">+</text>
						</view>
					</view>
			    </uni-swipe-action-item>
			    
			</uni-swipe-action>
		</view>
		<view class="end" v-if="show==true">
			<view class="end-left">
				<view>
					总计：<text style="color: #f00;font-weight: bold;" >￥ {{totalPrice}}</text>
					<text style="color: #f00;font-weight: bold; margin-left: 40rpx;">限额:￥ {{limitPrice}}</text>
				</view>
				</view>
				
				<view class="end-right">

				   <button @click="confirmOrder()" style="background-color: cornflowerblue">结算({{totalNum}})</button> 
				</view>		
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
		import config from '../../common/config';
	
			export default{
				data(){
					return{
						show:true,
						options:[
						         {
						            text: '删除',
						            style: {
						                backgroundColor: '#dd524d'
						            }
						        },
								
						      ],
					 dataForm:[],		   
					 sumPrice:0,
					 sumMoney:0,
					 supplierOrderDetailsList:[]
					}
				},
				created() {		
						
							this.getDataList()
						
						},
		methods:{
			updateOrder(){
							  axios.put(config.baseUrl+'supplier/ssmsudetails/updateSupplierInfo',this.dataForm)
							  .then((response)=>{
							  	console.log(response)
							  	if(response.data.code==0){
							  		uni.navigateTo({
							  			url:'/pages/wancheng/wancheng'
							  		})
							  	}
							  })
			},
			goshopping(id){
				let suId=id
							console.log(this.show)
							uni.navigateTo({
								url:'/pages/goods/goods'
							})
							console.log(suId)
						},
			getDataList(){
									let suId=uni.getStorageSync('suId')
									axios.get(config.baseUrl+'supplier/ssmsudetails/findSuDetails/'+suId)
									.then((response)=>{
										this.supplierOrderDetailsList=response.data.detailsVoList
										
										console.log(this.supplierOrderDetailsList.length)
										if(this.supplierOrderDetailsList.length==0){
											this.show=false
										}
											
										
										console.log(response.data.detailsVoList)
									})
								},
			
			change(e){
				console.log(e)
			},
			
			
			reduce(item){
				let num=item.goodsNum
				if(num>1){
					num-=1
				}else if(num=1){
					uni.showToast({
					                    title:"该宝贝不能减少了哟~" 
					                })
				}
				item.goodsNum=num
				uni.setStorageSync('subNumber',item.goodsNum)
			},
			add(item){
				let num =item.goodsNum
				item.goodsNum=num+1
				uni.setStorageSync('addNumber',item.goodsNum)
				
			},
			onClick(e){
			    console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			  },
			  swipeChange(e,index){
			    console.log('当前状态：'+ e +'，下标：' + index)
			  },
			  bindClick(id){
				  let orderId=id
				  console.log(orderId)
				  uni.showModal({
				  	title:'提示',
					content:'您确定删除次商品吗?',
					cancelColor: '#ff0000',
					success:function(res) {
						if(res.confirm){
							axios.delete(config.baseUrl+'supplier/ssmsudetails/deleteOrderInfo/'+orderId)
							.then((response)=>{
										  if(response.data.code==0){
												uni.showToast({
												title:'删除成功',
												icon:'success',
												
												  })
												  this.getDataList()
												  }
							})
						}else if(res.cancel){
							uni.showToast({
								title:'您取消了删除'
							})
						}
					}.bind(this)
				  })
				  
			  },
			  confirmOrder(){
				 let subNumber=uni.getStorageSync('subNumber')
				 let addNumber= uni.getStorageSync('addNumber')
				 console.log(subNumber)
				 console.log(addNumber)
				  //console.log(this.sumPrice)
				  //console.log(this.sumMoney)
				  if(this.sumPrice>this.sumMoney){
					  uni.showToast({
					  	title:'超出限额了,亲🙂',
						icon:'error'
					  })
				  } else if(this.sumPrice==0){
					 uni.showToast({
					 	title:'还未选购商品哦,亲🙂'
					 })
				  } else if(this.sumPrice<=this.sumMoney){
								this.dataForm=this.supplierOrderDetailsList
								uni.showModal({
									title:'提示',
									content:'确定提交订单吗?',
									cancelColor: '#ff0000',
									success:function(res) {
										if(res.confirm){
										this.updateOrder()
										
										}else if(res.cancel){
											
											uni.showToast({
												title:'您取消了订单'
											})
										}
									}.bind(this)
								})		 
				  }
			  }
		},
		computed:{
			totalNum(){
				let totalNum = 0;
				for(var i=0;i<this.supplierOrderDetailsList.length;i++){
					totalNum+=this.supplierOrderDetailsList[i].goodsNum
				}
			
				console.log(totalNum)
				return totalNum
			},
			
			totalPrice() {
			    let totalPrice = 0;
			    for(var i=0;i<this.supplierOrderDetailsList.length;i++){
			    	totalPrice+=this.supplierOrderDetailsList[i].goodsNum*this.supplierOrderDetailsList[i].goodsInprice;
				}
				//console.log(totalPrice)
			    this.sumPrice=totalPrice
			    return totalPrice
			},
			limitPrice(){
				let limitPrice=0;
				if(this.supplierOrderDetailsList.length!=0){
					limitPrice=this.supplierOrderDetailsList[0].sjQuota
					
				}
				
				 this.sumMoney=limitPrice
				//console.log(limitPrice)
				return limitPrice
			}
			  
			
			
		}
	}
	
</script>

<style lang="scss">
	.goods{
		line-height: 80rpx;
		background-color: #FFFFFF;
		&-detail{
		    display: flex;
		    padding: 30rpx 15rpx 30rpx 30rpx;
		    background-color: #fff;
		    justify-content: space-between;
		    border-bottom: 5rpx solid #F1F1F1;
		    align-items: center;
		    .detail-left{
		        display: flex;
		        .goods-left{
		            display: flex;
		            align-items: center;
		        }
		    }
		    .size{
		        display: flex;
		        justify-content: space-around;
		        flex-direction: column;
		        margin-left: 30rpx;
		        .goods-price{
		            font-size: 25rpx;
		            color: #F44545;
		            
		        }
		    }
		    .detail-right{
		        text{
		            width: 50rpx;
		            line-height: 50rpx;
		            text-align: center;
		            display: inline-block;
		            background-color: #F7F7F7;
		            margin-right: 10rpx;
		        }
		        .add {
		            color: #FA4305;
		            border-radius: 10rpx 30rpx 30rpx 10rpx;
		            margin-right: 20rpx;
		        }
		        .subtract{
		            border-radius: 30rpx 10rpx 10rpx 30rpx;
		        }
		    }
		}
	}
	.empty{
		
		    position: relative;
		    top: 220rpx;
		    text-align: center;
		    display: flex;
		    align-items: center;
		    flex-direction: column;
		    &-text{
		        color: #808080;
		        margin-bottom: 50rpx;
		    }
		    &-button{
		        width: 300rpx;
		        height: 90rpx;
		        color:orange;
		        border: 1rpx solid orange;
		        text-align: center;
		        line-height: 90rpx;
		        border-radius: 48rpx;
		    }		
	}
	.end{
	    width: 100%;
	    height: 100rpx;
	    background-color:#fff;
 	    position: fixed;
	    bottom: 0; 
	    left: 0;
	    display: flex;
	    align-items: center;
		margin-top: auto;
	    &-left{
	        width: 70%;
	        display: flex;
	        justify-content: space-between;
	        padding: 0 30rpx;
	        .end-flex{
	            display: flex;
	            align-items: center;
	        }
	    }
	    &-right{
	        width: 30%;
	        line-height: 90rpx;
	        background-color: #F44545;
	        text-align: center;
	        color: #fff;
	    }
	}
	.img{
	
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	
	}
</style>
